<template>
  <div>
    <table>
      <tr>
        <th>账号</th>
        <th> <el-input v-model="username"></el-input></th>
        <th> <el-button type="primary" @click="updateUser">修改</el-button></th>
      </tr>
      <tr>
        <th>密码</th>
        <th> <el-input v-model="password"></el-input></th>
        <th> <el-button type="primary" @click="updateUser">修改</el-button></th>
      </tr>
      <tr>
        <th>性别</th>
        <th> <el-input v-model="sex"></el-input></th>
        <th> <el-button type="primary" @click="updateUser">修改</el-button></th>
      </tr>
      <tr>
        <th>地址</th>
        <th> <el-input v-model="address"></el-input></th>
        <th> <el-button type="primary" @click="updateUser">修改</el-button></th>
      </tr>
      <tr>
        <th>名字</th>
        <th> <el-input v-model="name"></el-input></th>
        <th> <el-button type="primary" @click="updateUser">修改</el-button></th>
      </tr>
    </table>
    <div class="button">
      <el-button type="primary" @click="logout">退出</el-button>
    </div>
  </div>
</template>

<script>
import service from '@/axios/axiosConfig'
export default {
  data() {
    return {
      username: sessionStorage.getItem("username"),
      password: sessionStorage.getItem("password"),
      sex: sessionStorage.getItem("gender"),
      address: sessionStorage.getItem("location"),
      name: sessionStorage.getItem("name"),
    };
  },
  methods: {
    async updateUser() {
      const responseBody = {
        username: this.username,
        password: this.password,
        name: this.name,
        gender: this.sex,
        location: this.address,
      };
      const response = await service.post(
        "http://localhost:8080/common/updateUser",
        responseBody
      )
      console.log(response);
    },
    async logout() {
      const responseBody = []
      const response = await service.post(
        "http://localhost:8080/common/logout",
        responseBody
      )
      sessionStorage.removeItem("username")
      sessionStorage.removeItem("password")
      sessionStorage.removeItem("gender")
      sessionStorage.removeItem("location")
      sessionStorage.removeItem("name")
      sessionStorage.removeItem("token")
      console.log(response);
      this.$router.push("/login");
    },
  }
};
</script>